<template>
	<view class="cu-list menu">
		<view class="cu-list menu-avatar">
			<view class="cu-item" @tap="showMyModel" data-target="AddressModal">
				<view class="cu-avatar round" :class="index==0? 'bg-red' : ''">张</view>
				<view class="content">
					<view class="text-bold">张三 18269179369</view>
					<view class="text-sm flex">
						<view class="text-cut">
							广西南宁市广西南宁市广西南宁市西乡塘区广西职业师范学院-新港中路3...
						</view> </view>
				</view>
				<view class="action">
					<view class="cuIcon-check text-bold"></view>
				</view>
			</view>
		</view>

		<view class="cu-item margin-top-sm">
			<view class="content">
				<text class="">共3件商品</text>
			</view>
		</view>

		<view class="cu-item" v-for="(item,index) in goodsInfo" :key="index">
			<view class="flex padding-tb">
				<image class="item-image" :src="item.goods_image" mode="aspectFill"></image>
				<view class="flex flex-direction justify-between padding-left">
					<view class="text-lg flex justify-between align-center">
						<text class="text-cut goods-title">{{item.goods_name}}</text>
						<text class="text-gray text-sm padding-left">x{{item.cart_num}}</text></view>
					<text class="text-price text-red">{{item.goods_price}}</text>
				</view>
			</view>
		</view>

		<view class="cu-item margin-top-sm arrow">
			<view class="content">
				<text class="">优惠券</text>
			</view>
			<view class="action">
				<text class="text-gray">请选择</text>
			</view>
		</view>
		<view class="cu-item">
			<view class="content">
				<text class="">积分抵扣</text>
			</view>
			<view class="action">
				<text class="text-gray">当前积分</text>
			</view>
		</view>
		<view class="cu-item">
			<view class="content">
				<text class="">快递费用</text>
			</view>
			<view class="action">
				<text class="text-gray">免运费</text>
			</view>
		</view>
		<!-- <view class="cu-bar bg-white">
				<view class="action">
					<text>备注信息</text>
				</view>
			</view> -->
		<view class="cu-form-group align-start">
			<view class="title">备注信息</view>
			<textarea value="" placeholder="添加备注(150字以内)" />
			</view>
			
			<view class="cu-item margin-tb-sm">
				<view class="content padding-tb-sm">
					<view class="flex justify-between">
						<text class="">商品总价</text>
						<text class="text-gray text-price">10866</text>
						</view>
					<view class="flex justify-between">
						<text class="text-sm">运费</text>
						<text class="text-gray text-price text-right">100</text>
					</view>
				</view>
				<!-- <view class="action">
					<view></view>
					<view></view>
				</view> -->
			</view>
			
			<view class="cu-tabbar-height"></view>
			
			<view class="cu-bar bg-white tabbar border shop foot flex justify-between">
				<view class="padding-left">
					<text class="title">合计：</text>
					<text class="text-price text-red text-lg">10086</text>	
				</view>
				<view class="padding-right">
				<navigator url="view">
					<button class="cu-btn bg-red round shadow-blur lg" @tap="orderCreate">立即结算</button>
				</navigator>
				</view>
			</view>
			
			<!-- 地址弹窗 start-->
			<view class="cu-modal bottom-modal" :class="modalName=='AddressModal' ? 'show' : ''" @tap="hideMyModel">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white justify-end">
						<view class="content">地址选择</view>
						<view class="action" @tap="hideMyModel">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="(item,index) in addressInfo" :key="index" :class="index==0 ? 'text-red' : ''">
							<view class="cu-avatar sm round" :class="index==0? 'bg-red' : ''"><text class="cuIcon-locationfill"></text></view>
							<view class="content">
								<view class="text-bold">{{item.real_name}} {{item.phone}}</view>
								<view class="text-sm flex">
									<view class="text-cut">
										{{item.detail}}
									</view> </view>
							</view>
							<view class="action">
								<view class="cuIcon-check text-bold"></view>
							</view>
						</view>
						<view class="padding-lr-sm padding-tb bg-white">
							<button class="cu-btn lg bg-red shadow-blur round response">选择其他地址</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 地址弹窗 end -->
			
			<zhi-authorize></zhi-authorize>
		</view>
</template>

<script>
	const app = getApp()
	import util from '../../common/util.js'
	import zhiAuthorize from '@/components/zhi-authorize/zhi-authorize.vue'
	export default {
		components: {
			zhiAuthorize
		},
		data() {
			return {
				cartId: '',
				couponId: 0,
				addressId: 0,
				cartInfo: [],
				userInfo: [],
				modalName: null,
				addressInfo: [],
				goodsInfo: [],
				priceInfo: [],
			}
		},
		onLoad:function(options){
			if (!options.cartId) return util.Toast({ title: '请选择商品' }, { tab: 3, url: 1 })
			this.cartId = options.cartId
			this.addressId = options.addressId || 0
			this.couponId = options.couponId || 0
			
			uni.$on('listenAuthorize', function(res) {
				this.getUserAddress()
				this.getOrderConfirmInfo()
			})
			uni.$off('listenAuthorize')
		},
		onShow:function(){
			if (app.globalData.isLogin) {
				this.getUserAddress()
				this.getOrderConfirmInfo()
			}
		},
		methods: {
			showMyModel(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideMyModel(e) {
				this.modalName = null
			},
			/* 生成订单并支付 */
			async orderCreate(e) {
				console.log('生成订单并支付中...');
				if (!this.addressId) return util.Toast({ title: '请选择收货地址' })
				let data = {
					real_name: this.contacts,
					phone: this.phone,
					addressId: this.addressId,
					mark: this.mark,
					from: 'mp-wechat',
				}
				uni.showLoading({
					title: '订单支付中'
				})
				try{
					let res = await this.$api.orderCreate({ key: this.orderKey, data: data })
					var status = res.data.status
					var orderId = res.data.orderId
					
					uni.requestPayment({
						timeStamp: res.data.list.timestamp,
						nonceStr: res.data.list.noncestr,
						package: res.data.list.package,
						signType: res.data.list.signType,
						paySign: res.data.list.sign,
						success:function(res){
							uni.hideLoading()
							return util.Toast({ title: '支付成功', icon: 'success' }, { tab: 5, url: 'result'})
						},
						fail:function(err){
							uni.hideLoading()
							return util.Toast({ title: '取消支付' }, { tab: 5, url: 'result'})
						},
						complete:function(res){
							uni.hideLoading()
							if (res.errMsg == 'requestPayment:cancel') return util.Toast({ title: '取消支付' })
						}
					})
				}catch(err){
					uni.hideLoading()
					return util.Toast({ title: err.msg })
				}
			},
			/* 有传过来地址id则选用,否则取默认地址 */
			async getUserAddress() {
				try{
					let id = this.addressId ? this.addressId : 0
					let res = await this.$api.userAddressIndex()
					//this.addressId = res.data.id
					this.addressInfo = res.data.data
				}catch(err){
					util.Toast({ title: err.msg })
				}
				uni.$off('listenAuthorize')
			},
			/* 确认购物车订单信息 */
			async getOrderConfirmInfo() {
				try{
					let res = await this.$api.orderConfirm({id: this.cartId})
					this.goodsInfo = res.data.goodsInfo
					this.priceInfo = res.data.priceInfo
				}catch(err){
					//util.Toast({ title: err.msg }, { tab: 3, url: 1 })
				}
			}
		}
	}
</script>

<style lang="scss">
	.item-image {
		width: 130upx;
		height: 130upx;
	}
	.goods-title {
		width: 450upx;
	}
	.cu-list.menu-avatar>.cu-item {
		.content {
			left: 110upx;
			text-align: left;
		}
		.action {
			width: 80upx;
		}
		.flex .text-cut {
			min-width: 560upx;
		}
	}
</style>
